<template>
  <div class="bg_write" style="position:relative">
    <el-row>
      <el-col :span="24" class="content_title">
        <el-col :span="12">
          <HeadTitle></HeadTitle>
        </el-col>
        <el-col :span="12"></el-col>
      </el-col>
    </el-row>
    <el-row class="home">
      <el-col :span="24" class="home_box">
        <div class="phone">
          <div class="phone_top" style="height:auto">
            <div class="phone_header">
              <img src="./../../../assets/img/home/phone_header.png" alt />
            </div>
            <div
              class="lesson_top"
              @click="show_btn(1)"
              :style="{'background': headList.banner&&headList.banner.length == 0?'#fec700':'url('+$fnc.getImgUrl(headList.banner[0].piclink)+') no-repeat center top/100% 100% '}"
            >
              <div class="lesson_top_content">
                <div class="lesson_top_input">
                  <van-icon name="search"></van-icon>
                  <input type="text" placeholder="精选好房" />
                </div>
              </div>
              <div class="index_control index_head" v-show="top_show">
                <div
                  class="control_item control_sanjiao on"
                  style="margin-top:70px"
                  v-show="top_show"
                >
                  <el-form>
                    <el-form-item label="背景图片：" :label-width="formLabelWidth">
                      <el-col :span="12">
                        <div class="img_nav">
                          <img
                            :src="headList.banner && headList.banner.length == 0 ? '' : $fnc.getImgUrl(headList.banner[0].piclink) "
                            class="nav_view_pic"
                            alt
                          />
                          <span class="imgnav-reselect">
                            <el-upload
                              action="/api/common/upload/index/"
                              multiple
                              :on-success="uploadSuccess"
                              :show-file-list="false"
                            >重新选择</el-upload>
                          </span>
                        </div>
                      </el-col>
                    </el-form-item>

                    <el-col :span="12" class="tr pd_right_15 sizeColor_red"></el-col>

                    <el-divider></el-divider>
                    <el-form-item label="轮播图是否显示" :label-width="formLabelWidth">
                      <el-col :span="12">
                        <el-switch
                          v-model="bannerList.is_show"
                          active-color="#13ce66"
                          inactive-color="#999999"
                          class="hone_switch"
                          :width="70"
                          active-value="1"
                          inactive-value="0"
                        ></el-switch>
                      </el-col>
                      <el-col :span="12" class="tr pd_right_15 sizeColor_red"></el-col>
                    </el-form-item>

                    <upcard
                      class="banner"
                      @sendDel="getSendDel"
                      @send_baner_id="get_banner_id"
                      :data="bannerList.banner"
                      :cart="list_card"
                    ></upcard>
                  </el-form>
                </div>
              </div>
            </div>
          </div>

          <div class="lesson_top_carousel">
            <div class="block" style="z-index: 10">
              <el-carousel
                trigger="click"
                height="190px"
                style="z-index: 10;    border-radius: 12px;"
              >
                <el-carousel-item v-for="(item,index) in bannerList.banner" :key="index">
                  <img :src="$fnc.getImgUrl(item.piclink)" alt />
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>

          <div class="phone_menu" @click="show_btn(2)">
            <div class="phone_menu_body">
              <div class="phone_menu_item" v-for="(item,i) in menuList.banner" :key="i">
                <div class="phone_menu_item_icon">
                  <img :src="$fnc.getImgUrl(item.piclink)" alt />
                </div>
                <span>{{item.title}}</span>
              </div>
            </div>
            <div class="index_control index_head" v-show="menu_show">
              <div class="control_item control_sanjiao on">
                <el-form>
                  <el-form-item label="栏目是否显示" :label-width="formLabelWidth">
                    <el-col :span="12">
                      <el-switch
                        v-model="menuList.is_show"
                        active-color="#13ce66"
                        inactive-color="#999999"
                        class="hone_switch"
                        :width="70"
                        active-value="1"
                        inactive-value="0"
                      ></el-switch>
                    </el-col>
                    <el-col :span="12" class="tr pd_right_15 sizeColor_red"></el-col>
                  </el-form-item>
                  <upcard
                    class="menu"
                    @sendDel="getSendDel"
                    @send_baner_id="get_banner_id"
                    :data="menuList.banner"
                    :cart="list_menu"
                    :is_index="true"
                  ></upcard>
                </el-form>
              </div>
            </div>
          </div>

          <!-- 公告    -->
          <div class="merchant_carousel">
            <div class="block" @click="show_btn('公告')">
              <div class="ykb-notice">
                <span>精选内容</span>
                <div v-text="estate_news"></div>
              </div>
            </div>
            <div
              class="index_control index_head4"
              v-show="showEstateEewsFrom"
              style="margin-top: -100px"
            >
              <div class="control_item control_sanjiao on">
                <el-form>
                  <el-form-item label="公告" :label-width="formLabelWidth">
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-input v-model="estate_news"></el-input>
                      </el-col>
                      <el-col :span="4">
                        <el-button type="primary" @click="showNewsDio">选择新闻</el-button>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>

          <!-- 模块 -->
          
           <all-module-item style=" background-color: white;"  @del_banner='get_banner_id' @show_btn="show_btn" @getSendDel='getSendDel' @del_part='del_part' :partListCon='partList' />



          <!-- 房产 -->
          <div class="phone_lesson" @click="show_btn(4)">
            <div class="phone_lesson_body">
              <div class="phone_title_lesson">
                <div class="phone_title_left">
                  <p>
                    {{shopList.title}}
                    <span>{{this.shopList.title_en}}</span>
                  </p>
                </div>
              </div>
              <div class="phone_course_content">
                <div
                  class="lesson_article_item estate-item"
                  v-for="(item,i) in this.shopList.pro"
                  :key="i"
                >
                  <div class="home_item">
                    <div class="home_item_left">
                      <el-image style="width: 104px; height: 94px" :src="item.piclink"></el-image>
                    </div>
                    <div class="home_item_right">
                      <p>{{item.title}}</p>
                      <p>
                        {{item.sales_office}}
                        <span v-if="item.construction_area">建面 {{item.construction_area}}m²</span>
                      </p>
                      <p>
                        <span>{{item.min_price}}</span>万元起
                      </p>
                      <p>
                        <span v-for="(it,i) in toChatStr(item.sub_title)" :key="i">{{it}}</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="index_control index_head" v-show="lessonshow">
                <div class="control_item control_sanjiao on">
                  <el-form>
                    <el-form-item label="栏目是否显示" :label-width="formLabelWidth">
                      <el-col :span="12">
                        <!--                                                是否显示本栏目-->
                        <el-switch
                          v-model="shopList.is_show"
                          active-color="#13ce66"
                          inactive-color="#999999"
                          :width="70"
                          class="hone_switch"
                          active-value="1"
                          inactive-value="0"
                        ></el-switch>
                      </el-col>
                      <el-col :span="12" class="tr pd_right_15 sizeColor_red"></el-col>
                    </el-form-item>
                    <el-form-item label="主标题" :label-width="formLabelWidth">
                      <el-col :span="12">
                        <el-input v-model="shopList.title" autocomplete="off"></el-input>
                      </el-col>
                    </el-form-item>
                    <el-form-item label="副标题" :label-width="formLabelWidth">
                      <el-col :span="12">
                        <el-input v-model="shopList.title_en" autocomplete="off"></el-input>
                      </el-col>
                    </el-form-item>
                    <upcard
                      @setId="setId"
                      :is_index="true"
                      class="shop estate estate"
                      @sendDel="getSendDel"
                      :data="shopList.pro"
                      cart="estate"
                    ></upcard>
                  </el-form>
                </div>
              </div>
            </div>
          </div>
          <div class="has-estates">更多新房优选</div>

          <!-- 新闻 -->

          <div class="phone_lesson" @click="show_btn(3)">
            <div class="phone_lesson_body">
              <div class="phone_title_lesson">
                <div class="phone_title_left">
                  <p>
                    {{newsList.title}}
                    <span>{{this.newsList.title_en}}</span>
                  </p>
                </div>
              </div>
              <div class="phone_course_content estate-news-box">
                <div
                  class="lesson_article_item estate-news-item"
                  v-for="(item,i) in this.newsList.pro"
                  :key="i"
                >
                  <div class="lesson_article_img" v-if="item.piclink">
                    <img :src="$fnc.getImgUrl(item.piclink)" alt />
                  </div>
                  <div class="lesson_article_content">
                    <p>{{item.title}}</p>
                    <p>新闻头条</p>
                  </div>
                </div>
              </div>
              <div class="index_control index_head" v-show="showNews">
                <div class="control_item control_sanjiao on">
                  <el-form>
                    <el-form-item label="栏目是否显示" :label-width="formLabelWidth">
                      <el-col :span="12">
                        <!--                                                是否显示本栏目-->
                        <el-switch
                          v-model="newsList.is_show"
                          active-color="#13ce66"
                          inactive-color="#999999"
                          :width="70"
                          class="hone_switch"
                          active-value="1"
                          inactive-value="0"
                        ></el-switch>
                      </el-col>
                      <el-col :span="12" class="tr pd_right_15 sizeColor_red"></el-col>
                    </el-form-item>
                    <el-form-item label="主标题" :label-width="formLabelWidth">
                      <el-col :span="12">
                        <el-input v-model="newsList.title" autocomplete="off"></el-input>
                      </el-col>
                    </el-form-item>
                    <el-form-item label="副标题" :label-width="formLabelWidth">
                      <el-col :span="12">
                        <el-input v-model="newsList.title_en" autocomplete="off"></el-input>
                      </el-col>
                    </el-form-item>
                    <upcard
                      @setId="setId"
                      :is_index="true"
                      class="shop news news"
                      @sendDel="getSendDel"
                      :data="newsList.pro"
                      cart="news"
                    ></upcard>
                  </el-form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-col :span="22" class="men_add">
      <el-card shadow="always">
        <el-button :loading="$store.state.isLoading" @click="save" @keydown.13="save">保存</el-button>
      </el-card>
    </el-col>
    <xz-news :show="showEstateEews" showType="list" @sendShop="getSend"></xz-news>
  </div>
</template>

<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import upcard from "@/components/currency/IndexSet_upload.vue";
import xzNews from "@/components/currency/xz_news.vue";
import allModuleItem from "@/components/currency/page/all-module-item/all-module-item";
export default {
  name: "new_home",
  components: {
    HeadTitle,
    upcard,
    xzNews,
    allModuleItem
  },
  data() {
    return {
      showEstateEewsFrom: false,
      showEstateEews: false,
      estate_news_id: "", //新闻ID
      estate_news: "", //新闻标题
      optionProps: {
        value: "id",
        label: "title",
        children: "z"
      },
      news_cate: [],
      news_form: {
        newslist: [],
        pageis_show_new: "", // 是否显示新闻开关
        pageis_show_new_cate: "" // 显示的分类
      },
      newsshow: false,
      header_iconList: [
        {
          title: "",
          id: ""
        },
        {
          title: "",
          id: ""
        }
      ],
      is_show_cate: "",
      copyright: "",
      action: "estate",
      del_banner: "",
      del_module: "",
      list_footer: "list_footer",
      list_item: "estate",
      list_menu: "list_menu",
      list_card: "list_card",

      menuListShow: 1,
      copyright_show: false,
      footer_show: false,
      lessonshow: false,
      ad_show: false,
      menu_show: false,
      carousel_show: false,
      top_show: false,
      header_show: false,
      showNews: false,
      top_del: {
        del_top_banner: [],
        del_top_menu: [],
        del_top_brand: [],
        del_top_day: [],
        del_top_find: [],
        del_top_list: [],
        del_top_shopList: [],
        del_top_adv: []
      },
      style_option: [
        {
          label: "1行1图",
          value: "0"
        },
        {
          label: "1行2图",
          value: "1"
        },
        {
          label: "1行3图",
          value: "2"
        },
        {
          label: "1+2",
          value: "3"
        }
      ],
      del_item: {
        delbannerList: [],
        delmenuList: [],
        delshopList: [],
        delpartList: [],
        delnewsList: []
      },
      //商品详情
      shopList: {
        is_show: "1",
        title: null,
        title_en: null,
        types: "product",
        pro: [
          {
            title: ""
          }
        ]
      },
      //新闻详情
      newsList: {
        is_show: "1",
        title: null,
        title_en: null,
        types: "news",
        pro: [
          {
            title: ""
          }
        ]
      },

      add_part_item: {
        id: "",
        is_show: "1",
        part_show: false,
        title: "主标题",
        title_en: "副标题",
        style: "0",
        types: "module",
        banner: [
          {
            id: "",
            cate: null,
            title: null,
            piclink: "",
            links: null,
            show: "",
            desc: ""
          }
        ]
      },

      // 模块
      partList: [
        {
          banner: [
            {
              piclink: "",
              title: ""
            }
          ],
          title: "",
          title_en: ""
        }
      ],
      footerList: [
        {
          title: "",
          id: ""
        }
      ],
      //菜单选项
      menuList: {
        banner: [
          {
            title: null,
            piclink: null
          }
        ]
      },
      //轮播图
      bannerList: {
        banner: [
          {
            id: null,
            title: null,
            piclink: null
          }
        ]
      },

      //头部背景
      headList: {
        id: "",
        iden: "estate",
        is_show: "1",
        title: "",
        title_en: "",
        style: "0",
        types: "background",
        banner: [
          {
            id: "",
            cate: "",
            title: "",
            piclink: "",
            links: ""
          }
        ]
      },

      //头部文件
      topList: {
        title: "",
        logo: ""
      },
      searchList: [
        { title: "" },
        { title: "" },
        { title: "" },
        { title: "" },
        { title: "" },
        { title: "" }
      ],
      search_input: "",
      formLabelWidth: "120px"
    };
  },
  created() {
    this.get_info();
  },
  methods: {
    toChatStr(str) {
      if (str) {
        return str.split(",");
      }
    },
    showNewsDio() {
      this.showEstateEews = true;

      this.$store.dispatch("getNewsList", {});
    },
    get_banner_id(item) {
      if (item.id != 0 && item.id != undefined) {
        this.del_banner += item.id + "@";
      }
    },
    setId(od, className) {
      if (className == "news") {
        //addEstateIndexNews
        this.$api.getEstate.addEstateIndexNews({ id: od }).then(res => {});
      } else if (className == "estate") {
        //addEstateIndexEstate
        this.$api.getEstate.addEstateIndexEstate({ id: od }).then(res => {});
      }
    },
    del_part(id) {
      //删除模块
      if (id != 0) {
        this.del_module += id + "@";
      }
    },
    add_part() {
      this.partList.push({
        id: "0",
        iden: "estate",
        is_show: "1",
        part_show: false,
        title: "",
        title_en: "",
        style: "0",
        types: "module",
        sort:'0',
        banner: [
          {
            id: "",
            cate: "",
            title: "",
            piclink: "",
            links: "",
            desc: "",
            sort:'0',
          }
        ]
      });
    },
    save() {
      var temp = {};

      temp.iden = "estate";

      this.headList.iden = "estate";

      temp.estate_news_id = this.estate_news_id;

      temp.background = JSON.stringify(this.headList);

      temp.slide = JSON.stringify(this.bannerList);

      temp.navigation = JSON.stringify(this.menuList);

      temp.module = JSON.stringify(this.partList);

      var sort_str = "";

      this.shopList.pro.forEach(item => {
        sort_str = sort_str + item.id + "@";
      });
      let shop_List = {};

      shop_List = this.shopList;

      shop_List.pro = [];

      //sortEstate

      var new_sore_str = "";

      this.newsList.pro.forEach(item => {
        new_sore_str = new_sore_str + item.id + "@";
      });
      let news_List = {};

      news_List = this.newsList;
      news_List.pro = [];

      console.log(this.shopList);

      temp.estate = JSON.stringify(shop_List);

      temp.news = JSON.stringify(news_List);

      temp.del_module = this.del_module;

      temp.del_banner = this.del_banner;

      temp.is_show_cate = this.is_show_cate;

      // temp.header = JSON.stringify(this.header_iconList);

      // temp.pageis_show_new = this.news_form.pageis_show_new;
      // temp.pageis_show_new_cate = this.news_form.pageis_show_new_cate;

      this.$api.getEstate.sortEstate({ id_str: sort_str }).then(res => {});

      //sortEstateNews

      this.$api.getEstate
        .sortEstateNews({ id_str: new_sore_str })
        .then(res => {});

      this.$api.getEstate.addEstateIndex(temp).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess("");
          this.get_info();
        }
      });
    },
    Initialize_array() {
      this.topList = { title: "", logo: "" };
      this.headList = {
        id: "",
        iden: "",
        is_show: "1",
        title: "",
        title_en: "",
        style: "0",
        types: "background",
        banner: [
          { id: "", cate: "", title: "", piclink: "", links: "", desc: "" }
        ]
      };
      this.bannerList = { banner: [{ id: null, title: null, piclink: null }] };
      this.menuList = { banner: [{}] };
      this.footerList = [];
      this.partList = [{ banner: [{ piclink: "" }] }];
      this.shopList = {
        is_show: "1",
        title: null,
        title_en: null,
        types: "product",
        pro: [{}]
      };
      this.newsList = {
        is_show: "1",
        title: null,
        title_en: null,
        types: "news",
        pro: [{}]
      };
    },
    get_info() {
      this.Initialize_array();
      this.$api.getEstate.getEstateIndex({ iden: "estate" }).then(res => {
        if (res.data.code == 200) {
          if (res.data.result.info.background.banner.length == 0) {
          } else {
            this.headList = res.data.result.info.background;
          }

          if (res.data.result.estate_news) {
            this.estate_news = res.data.result.estate_news.title;
            this.estate_news_id = res.data.result.estate_news_id;
          }

          this.bannerList = res.data.result.info.slide;

          this.menuList = res.data.result.info.navigation;

          this.shopList = res.data.result.info.estate;

          this.newsList = res.data.result.info.news;

          this.partList = res.data.result.module;
          this.footerList = res.data.result.footer;
        }
      });
    },
    judge(args, flag) {
      //奇偶数判断
      var odd = [];
      var even = [];
      var length = args.length || 0;
      for (var i = 0; i <= length - 1; i++) {
        if (i % 2 == 0) {
          odd.push(i);
        } else {
          even.push(i);
        }
      }
      if (flag == "odd") {
        return odd;
      } else {
        return even;
      }
    },
    getSendDel(obj, index, id) {
      if (obj.id == 0 || obj.id == undefined) return;
      switch (obj.title) {
        case "banner":
          this.del_item.delbannerList.push(obj.id);
          break;
        case "menu":
          this.del_item.delmenuList.push(obj.id);
          break;
        case "shop":
          this.del_item.delshopList.push(obj.id);
          this.$api.getPage.page_del_lesson({ id: obj.id }).then(res => {});
          break;
        case "news":
          this.del_item.delnewsList.push(obj.id);

          this.$api.getEstate
            .delEstateIndexNews({ id: obj.id })
            .then(res => {});
          break;

        case "estate":
          this.$api.getEstate
            .delEstateIndexEstate({ id: obj.id })
            .then(res => {});
          break;
        case "module":
          this.del_item.delpartList.push(obj.id);
          break;
        case "footer":
          this.del_item.delpartList.push(obj.id);
          break;
      }
    },

    getSend(row) {
      this.estate_news_id = row.id;
      this.estate_news = row.title;
    },

    del_headerbj() {
      //删除背景图片
      this.headList.piclink = "";
    },
    topuploadSuccess(response) {
      //上传图片
      if (response.code == 200 && response.code_desc == "请求成功") {
        this.topList.logo = response.result;
        this.$message.success("上传成功");
      } else if (response.code == 400) {
        this.$message.error("上传失败！不支持的类型");
      }
    },
    uploadSuccess(response) {
      //上传图片
      if (response.code == 200 && response.code_desc == "请求成功") {
        if (this.headList.banner.length == 0) {
          this.headList.banner.push({ piclink: "" });
        }
        this.headList.banner[0].piclink = response.result;
        this.$message.success("上传成功");
      } else if (response.code == 400) {
        this.$message.error("上传失败！不支持的类型");
      }
    },
    show_btn(id, Item) {
      //显示 修改窗口按钮
      this.top_show = false;
      this.menu_show = false;
      this.partList.forEach(function(item) {
        item.part_show = false;
      });
      this.lessonshow = false;
      this.showNews = false;
      this.showEstateEewsFrom = false;
      switch (id) {
        case 1:
          this.top_show = true;
          break;
        case 2:
          this.menu_show = true;
          break;
        case 5:
          Item.part_show = true;
          break;
        case 4:
          this.lessonshow = true;
          break;
        case 3:
          this.showNews = true;
          break;
        case "公告":
          this.showEstateEewsFrom = true;
          break;
      }
    }
  },
  watch: {
    //查询参数改变，再次执行数据获取方法
    $route() {
      this.Initialize_array();
      this.get_info();
    }
  },
  filters: {
    toFix(val) {
      return parseFloat(val).toFixed(2);
    }
  }
};
</script>

<style scoped lang='less'>
.has-estates {
  margin: 14px 18px 25px 18px;
  background: #fff1f1;
  color: #f4504d;
  font-size: 15px;
  text-align: center;
  padding: 11px 0;
  border-radius: 5px;
}
.estate-news-box {
  padding-top: 8px;
  .estate-news-item {
    margin-bottom: 35px;
    height: auto;
    .lesson_article_img {
      width: 105px;
      height: 80px;
      border-radius: 5px;
      margin-right: 30px;
      img {
        height: auto;
      }
    }
    .lesson_article_content {
      min-height: 80px;
      width: auto;
      flex: 3;
      > p:first-child {
        font-size: 16px;
        line-height: 1.4;
      }
      > p:last-child {
        font-size: 13px;
        color: #90939a;
        font-weight: normal;
      }
    }
  }
}

.home {
  padding: 20px 20px 22px;
  background: #fff;
  margin-bottom: 80px;
}
.home_box {
  width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
}
.phone {
  width: 375px;
  background-color: #ffffff;
  margin-left: 50px;
  margin-top: 50px;
  position: relative;
  border: 1px solid #e2e2e2;
}
.phone_top {
  width: 100%;
  position: relative;
  z-index: 1;
}
.phone_header {
  width: 100%;
  height: 75px;
  position: relative;
  border: 1px solid transparent;
}

.phone_header img {
  width: 100%;
  /*z-index: 5;*/
}

/**************顶部背景图片****************/
.lesson_top {
  width: 100%;
  height: 190px;
  position: relative;
  cursor: pointer;
  border: 1px solid transparent;
  z-index: 99;
}
.lesson_top:hover {
  border: 1px dashed red;
}
.lesson_top_bj {
  width: 100%;
}
.lesson_top_bj img {
  width: 100%;
}
.lesson_top_content {
  width: 100%;

  padding: 0 15px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin: 14px 0 35px;
}
.lesson_top_input {
  width: 90%;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-right: 10px;
}
.lesson_top_input input {
  width: 100%;
  height: 100%;
  padding: 0 30px;
  background-color: #f0f0f0;
  font-size: 12px;
  color: #babdc2;
  text-align: center;
  border-radius: 20px;
}

.lesson_top_input .van-icon {
  font-size: 20px;
  color: #232d32;
  position: absolute;
  left: 30px;
}
.lesson_top_content .van-icon {
  font-size: 20px;
  color: #232d32;
}

/***************轮播图**********************/
.lesson_top_carousel {
  width: 100%;
  height: 190px;
  padding: 0 15px;
  margin-top: -125px;
  /* position: absolute; */
  /* top: 55px; */
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  z-index: 10;
  border: 1px solid transparent;
}
/* .lesson_top_carousel:hover {
  border: 1px dashed red;
} */
.lesson_top_carousel img {
  width: 100%;
  height: 100%;
}

/***************菜单栏**********************/
.phone_menu {
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 5px;
  height: 150px;
  z-index: 10;
  padding: 0px 10px 10px 10px;
  position: relative;
  border: 1px solid transparent;
}
.phone_menu:hover {
  border: 1px dashed red;
}

.phone_menu_body {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.phone_menu_item {
  width: 20%;
  height: 40%;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  cursor: pointer;
}
.phone_menu_item_icon {
  height: 80%;
}
.phone_menu_item_icon img {
  height: 100%;
}
.phone_menu_item span {
  font-size: 12px;
  color: #333333;
  padding-bottom: 5px;
}

/*****************修改头部***********************/
.transitionBody > div {
  overflow: auto;
}
.index_head {
  right: 10px;
  display: block;
}
.index_head:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.control_sanjiao::after {
  position: absolute;
  content: " ";
  top: 16px;
  left: -16px;
  display: block;
  width: 0;
  height: 0;
  border: 8px solid #f8f8f8;
  border-color: transparent #e0dbdb transparent transparent;
  z-index: 111;
}
.index_control {
  position: absolute;
  left: 400px;
}
.control_item {
  position: absolute;
  width: 630px;
  padding: 10px 10px 80px 10px;
  background-color: #f8f8f8;
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  margin-top: 65px;
}
.img_nav {
  width: 200px;
  height: 100px;
  position: relative;
  padding: 1px;
  border: 1px solid #ddd;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.phone_lesson {
  width: 100%;
  border: 1px solid transparent;
}
.phone_lesson:hover {
  border: 1px dashed red;
}
.phone_lesson_body {
  width: 92%;
  margin: 0 auto;
  position: relative;
}
.phone_title_lesson {
  width: 100%;
  height: 50px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
.phone_title_left {
  width: 70%;
}
.phone_title_left p {
  font-size: 20px;
  color: #2f2f2f;
  font-weight: bold;
  text-align: left;
}
.phone_title_left span {
  font-size: 14px;
  color: #d4d4d4;
  font-weight: 400;
}
.lesson_article_item {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.lesson_article_img {
  width: 35%;
}
.lesson_article_img img {
  width: 100%;
  height: 70px;
  border-radius: 5px;
}

.lesson_article_content {
  width: 62%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
}
.lesson_article_content p:nth-of-type(1) {
  font-size: 13px;
  color: #000000;
  line-height: 20px;
  text-align: justify;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.lesson_article_content p:nth-of-type(2) {
  font-size: 14px;
  font-weight: bold;
  color: #ea6c2b;
  line-height: 20px;
  text-align: left;
}
.lesson_article_content p:nth-of-type(2) span {
  font-size: 12px;
  color: #626262;
  font-weight: normal;
  padding-left: 10px;
}
.hone_switch {
  width: 200px;
  /*height: 50px;*/
}
.el-switch__core {
  height: 30px;
  border-radius: 20px;
}
.el-switch__core:after {
  width: 27px;
  height: 27px;
}
.el-switch.is-checked .el-switch__core::after {
  left: 100%;
  margin-left: -26px;
}
.add {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 80px;
}
.phone_news {
  width: 100%;
  border: 1px solid transparent;
}
.phone_news:hover {
  border: 1px dashed red;
}
.phone_news_body {
  width: 92%;
  margin: 0 auto;
  position: relative;
}
.news_list_item {
  width: 100%;
  background-color: white;
  height: 95px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}
.news_list_item_right {
  width: 35%;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
}
.news_list_item_right img {
  width: 100%;
  height: 100%;
}
.news_list_item_left {
  width: 65%;
  height: 80px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  padding-right: 10px;
}
.news_list_item_left p {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #000000;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.news_list_item_other {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.news_list_item_other span {
  font-size: 12px;
  color: #a8a8a8;
}
.news_list_item_otherspan:nth-of-type(1) {
  display: flex;
  height: 20px;
  align-items: center;
}
/* for Chrome */
.phone_top_word > div > div::-webkit-scrollbar {
  display: none;
}
.phone_top_word span {
  font-size: 12px;
  color: #fff;
  padding: 3px 12px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  z-index: 6;
  margin-right: 5px;
}

.home_item {
  // width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  padding-bottom: 15px;
}
.phone_course_content {
  > div.estate-item:not(:last-child) {
    border-bottom: 1px solid #f2f3f4;
  }
}
.home_item_left {
  width: 104px;
  height: 94px;
  margin-right: 8px;
}
.home_item_left img {
  width: 100%;
  overflow: hidden;
}
.home_item_right {
  flex: 3;
  min-height: 94px;
  font-size: 12px;
  text-align: left;
}
.home_item_right p:nth-of-type(1) {
  font-size: 16px;
  line-height: 18px;
  padding-bottom: 8px;
  color: #0a0e12;
  font-weight: bold;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home_item_right p:nth-of-type(2) {
  width: 100%;
  font-size: 12px;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home_item_right p:nth-of-type(3) {
  width: 100%;
  font-size: 12px;
  color: #333;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home_item_right p:nth-of-type(3) span {
  font-size: 18px;
  color: #ff442f;
  font-weight: bold;
  padding-right: 5px;
}
.home_item_right p:nth-of-type(4) {
  color: #333;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.home_item_right p:nth-of-type(4) span {
  font-size: 10px;
  line-height: 10px;
  color: #808184;
  border: 1px solid #d7d7d7;
  padding: 5px 5px;
  margin-right: 5px;
  margin-bottom: 5px;
}
.estate-item {
  height: auto;
}

/*幻灯片*/
.merchant_carousel {
  width: 100%;
}
.merchant_carousel > .block {
  border: 1px solid transparent;
  overflow: hidden;
}
.merchant_carousel > .block:hover {
  border: 1px dashed red;
}
.el-carousel__item {
  border-radius: 10px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.ykb-notice {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #fff;
  height: 32px;
  margin: 0 18.547px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  > span {
    color: #fb9528;
    font-weight: bold;
    font-size: 17px;
    width: 78px;
    margin-right: 0px;
  }
  div {
    max-width: 260px;
    font-size: 14px;
    color: rgb(20, 53, 80);
    font-weight: bold;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  img {
    width: 16px;
  }
}
</style>
